<template>
  <div class="contenter" :class="tabActive == 4 ? 'contenter4' : ''">
    <!-- <baiduMapView class="map" /> -->
    <mapBox class="map" />

    <div class="topHeader">
      <img class="headerImage" src="@/assets/header.png" alt="" />
    </div>
    <div class="tabbarBox">
      <div
        @click="tabClick(item, index)"
        :class="tabActive == index ? 'activetabbar' : 'morentabbar'"
        v-for="(item, index) in tabBar"
      >
        {{ item.name }}
      </div>
    </div>

    <qjjkLeft v-if="tabActive == 0" />
    <qjjkRight v-if="tabActive == 0" />

    <rljkLeft v-if="tabActive == 1" />
    <rljkRight v-if="tabActive == 1" />

    <aqjkLeft v-if="tabActive == 2" />
    <aqjkRight v-if="tabActive == 2" />

    <yyjcLeft v-if="tabActive == 3" />
    <yyjcRight v-if="tabActive == 3" />
    <yjyaLeft v-if="tabActive == 4" />
    <yjyaRight v-if="tabActive == 4" />
  </div>
</template>
<script>
import qjjkRight from "../home/components/qjjkRight.vue";
import qjjkLeft from "../home/components/qjjkLeft.vue";
import rljkLeft from "../home/components/rljkLeft.vue";
import rljkRight from "../home/components/rljkRight.vue";
import aqjkLeft from "../home/components/aqjkLeft.vue";
import aqjkRight from "../home/components/aqjkRight.vue";
import yyjcLeft from "../home/components/yyjcLeft.vue";
import yyjcRight from "../home/components/yyjcRight.vue";
import yjyaLeft from "../home/components/yjyaLeft.vue";
import yjyaRight from "../home/components/yjyaRight.vue";
import baiduMapView from "./components/baiduMapView.vue";
import mapBox from "./components/mapBox.vue";
export default {
  components: {
    qjjkRight,
    qjjkLeft,
    rljkLeft,
    rljkRight,
    aqjkLeft,
    aqjkRight,
    yyjcLeft,
    yyjcRight,
    yjyaLeft,
    yjyaRight,
    baiduMapView,
    mapBox,
  },
  watch: {},
  created() {},
  data() {
    return {
      tabActive: 0,
      tabBar: [
        {
          name: "全景监控",
        },
        {
          name: "人流监控",
        },
        {
          name: "安全监控",
        },
        {
          name: "文旅资源",
        },
        {
          name: "应急预案",
        },
      ],
    };
  },
  methods: {
    tabClick(item, index) {
      this.tabActive = index;
    },
  },
};
</script>
<style scoped>
.contenter {
  /* background: url("@/assets/qjjk/背景地图.png") no-repeat; */
  width: 100%;
  height: 100%;
  /* background-size: 100% 100%; */
  /* overflow-x: auto; */
  position: relative;
  overflow: auto;
}
.map {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

.contenter4 {
  /* background: url("../../assets/yjya/bg@2x.png") no-repeat; */
  width: 100%;
  height: 100%;
  /* background-size: 100% 100%; */
  /* overflow-x: auto; */
  position: relative;
}

.topHeader {
  width: 100%;
  position: absolute;
  top: 0;
}
.headerImage {
  width: 100%;
  /* height: 130px; */
}
.tabbarBox {
  width: 45%;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 99;
  left: 27.5%;
  bottom: 10px;
}
.activetabbar {
  width: 200px;
  height: 54px;
  background: url("@/assets/tabbarActive.png") no-repeat;
  background-size: 100% 100%;
  font-size: 24px;
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  line-height: 2;
  cursor: pointer;
}
.morentabbar {
  width: 200px;
  height: 54px;
  background: url("@/assets/tabbar.png") no-repeat;
  background-size: 100% 100%;
  font-size: 24px;
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 2;
  cursor: pointer;
}
.contentMain {
  width: calc(100% - 44px);
  position: absolute;
  height: calc(100% - 92px);
  top: 90px;
  left: 22px;
}
</style>
